<!DOCTYPE html>
<html>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <head>
    <title>信息收集</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 20px;
      }

      h1 {
        text-align: center;
      }

      form {
        max-width: 500px;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
      }

      input[type="text"],
      input[type="email"],
      textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }

      textarea {
        height: 80px;
      }

      select {
        width: 100%;
        height: 40px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }

      input[type="submit"] {
        background-color: #4caf50;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
      }

      input[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <h1>信息收集</h1>

    <form onsubmit="sendEmail(event)">
      <label for="merchantId">商户编号:</label>
      <input type="text" id="merchantId" name="merchantId" required />

      <label for="merchantName">商户名字:</label>
      <input type="text" id="merchantName" name="merchantName" required />

      <label for="contactPerson">联系人:</label>
      <input type="text" id="contactPerson" name="contactPerson" />

      <label for="contactPhone">联系人手机:</label>
      <input type="text" id="contactPhone" name="contactPhone" />

      <label for="contactEmail">联系人邮箱:</label>
      <input type="email" id="contactEmail" name="contactEmail" />

      <label for="selectField">修改资料项目:</label>
      <select id="selectField" name="selectField" required>
        <option value="全称">全称</option>
        <option value="简称">简称</option>
        <option value="地址">地址</option>
        <option value="营业执照">营业执照</option>
        <option value="结算账号">结算账号</option>
      </select>

      <label for="originalInfo">原信息:</label>
      <textarea
        id="originalInfo"
        name="originalInfo"
        rows="2"
        required
      ></textarea>

      <label for="newInfo">新信息:</label>
      <textarea id="newInfo" name="newInfo" rows="2" required></textarea>

      <input type="submit" value="提交" />
    </form>

    <script>
      function sendEmail(event) {
        event.preventDefault();

        var merchantId = document.getElementById("merchantId").value;
        var merchantName = document.getElementById("merchantName").value;
        var contactPerson = document.getElementById("contactPerson").value;
        var contactPhone = document.getElementById("contactPhone").value;
        var contactEmail = document.getElementById("contactEmail").value;
        var selectField = document.getElementById("selectField").value;
        var originalInfo = document.getElementById("originalInfo").value;
        var newInfo = document.getElementById("newInfo").value;

        var subject = "商户信息收集";
        var body =
          "商户编号: " +
          merchantId +
          "<br/>商户名字: " +
          merchantName +
          "<br/>联系人: " +
          contactPerson +
          "<br/>联系人手机: " +
          contactPhone +
          "<br/>联系人邮箱: " +
          contactEmail +
          "<br/>修改资料项目: " +
          selectField +
          "<br/>原信息: " +
          originalInfo +
          "<br/>新信息: " +
          newInfo;

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://luckycola.com.cn/tools/customMail", true);
        xhr.setRequestHeader("Content-Type", "application/json");

        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              alert("邮件发送成功！");
            } else {
              console.log("请求失败，状态码：" + xhr.status);
              console.log("错误原因：" + xhr.statusText);
            }
          }
        };

        var data = {
          ColaKey: "FS2zRBnuLaL05O169495773316214YryaTB2E",
          tomail: "zhangli@umpay.com",
          from: contactEmail ?? "1042480866@qq.com",
          fromTitle: "信息收集",
          subject: "信息收集结果",
          content: body,
        };

        xhr.send(JSON.stringify(data));
      }
    </script>
  </body>
</html>
